<template>
  <div>
    <a-card>
      <h3>个人设置</h3>
      <a-form-model :hideRequiredMark="true" v-model="profileInfo">
        <a-form-model-item label="作者名称">
          <a-input style="width: 300px" v-model="profileInfo.name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="个人简洁">
          <a-input type="textarea" v-model="profileInfo.desc"></a-input>
        </a-form-model-item>
        <a-form-model-item label="QQ">
          <a-input style="width: 300px" v-model="profileInfo.qqchat"></a-input>
        </a-form-model-item>
        <a-form-model-item label="微信">
          <a-input style="width: 300px" v-model="profileInfo.wechat"></a-input>
        </a-form-model-item>
        <a-form-model-item label="微博">
          <a-input style="width: 300px" v-model="profileInfo.weibo"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Github">
          <a-input style="width: 300px" v-model="profileInfo.github"></a-input>
        </a-form-model-item>
        <a-form-model-item label="Gitee">
          <a-input style="width: 300px" v-model="profileInfo.gitee"></a-input>
        </a-form-model-item>
        <a-form-model-item label="BiliBili">
          <a-input style="width: 300px" v-model="profileInfo.bili"></a-input>
        </a-form-model-item>
        <a-form-model-item label="邮箱">
          <a-input style="width: 300px" v-model="profileInfo.email"></a-input>
        </a-form-model-item>
        <a-form-model-item label="个人头像">
          <a-upload
            name="file"
            :multiple="false"
            :action="uploadUrl"
            :headers="headers"
            @change="uploadImgChange"
            listType="picture"
          >
            <a-button type="upload">点击上传</a-button>
            <br />
            <template v-if="profileInfo.id">
              <img
                :src="profileInfo.img"
                style="width: 120px; height: 100px; margin-top: 5px"
                alt="无"
              />
            </template>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="图像背景图">
          <a-upload
            name="file"
            :multiple="false"
            :action="uploadUrl"
            :headers="headers"
            @change="uploadAvatarChange"
            listType="picture"
          >
            <a-button type="upload">点击上传</a-button>
            <br />
            <template v-if="profileInfo.id">
              <img
                :src="profileInfo.avatar"
                style="width: 120px; height: 100px; margin-top: 5px"
                alt="无"
              />
            </template>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            type="danger"
            style="margin-right: 15px"
            @click="updateProfile"
            >更新</a-button
          >
          <a-button type="primary" style="margin-right: 15px">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import { url } from "../../plugin/http";
export default {
  data() {
    return {
      profileInfo: {
        id: 1,
        name: "",
        desc: "",
        qqchat: "",
        wechat: "",
        weibo: "",
        github: "",
        gitee: "",
        bili: "",
        email: "",
        img: "",
        avatar: "",
      },
      uploadUrl: url + "/upload",
      headers: {},
    };
  },
  created() {
    this.getProfile();
    this.headers = {
      Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
    };
  },
  methods: {
    async getProfile() {
      const { data: res } = await this.$http.get(
        `/profile/${this.profileInfo.id}`
      );
      if (res.status != 200) return this.$message.error("获取个人信息失败");
      this.profileInfo = res.data;
    },
    // 上传img文件
    uploadImgChange(info) {
      if (info.file.status !== "uploading") {
      }
      if (info.file.status === "done") {
        this.$message.success("图片上传成功");
        const imgUrl = info.file.response.url;
        this.profileInfo.img = imgUrl;
      } else if (info.file.status === "error") {
        this.$message.error("图片上传失败");
      }
    },
    // 上传avatar
    uploadAvatarChange(info) {
      if (info.file.status !== "uploading") {
      }
      if (info.file.status === "done") {
        this.$message.success("图片上传成功");
        const imgUrl = info.file.response.url;
        this.profileInfo.avatar = imgUrl;
      } else if (info.file.status === "error") {
        this.$message.error("图片上传失败");
      }
    },
    // 更新proflie
    async updateProfile() {
      const { data: res } = await this.$http.put(
        `/profile/${this.profileInfo.id}`,
        this.profileInfo
      );
      if (res.status != 200) return this.$message.error("更新失败");
      this.$message.success("更新成功");
      this.$router.push({ name: "admin" });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>